<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true">添加班级</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="班级" width="180" :sortable="true" :sort-method="sortFn">
                <template #default="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column prop="number" label="人数" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-popconfirm title="确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button type="danger" round :disabled="scope.row.default">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加标签 -->
        <el-dialog v-model="dialogVisible" title="添加班级">
            <el-form :model="addForm" status-icon label-width="80">
                <el-form-item label="班级名" prop="title">
                    <el-input v-model="addForm.title" />
                </el-form-item>
                <el-form-item label="导入名单" prop="role">
                    <el-upload :auto-upload="false" :on-change="handleChange" style="width: 100%;"
                        v-model:file-list="addForm.fileList">

                        <el-button class="ml-3" type="primary">
                            选择文件
                        </el-button>

                    </el-upload>
                </el-form-item>

            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAddConfirm()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import ImportExcel from '../../utils/ImportExcel.js'
const tableData = ref([])
const fileList = ref([])
const dialogVisible = ref(false)
const addForm = reactive({
    title: '',
    list: [],
    fileList: [],
})
onMounted(async () => {
    getList()
})

const getList = async () => {
    let res = await axios.get('/adminapi/classes')
    tableData.value = res.data
}

const handleChange = (file, fileList) => {
    // console.log(file);
    addForm.title = file.name.split('.')[0];
    ImportExcel(file.raw, (data) => {
        console.log(data);
        addForm.list = data;
    })
    // setTimeout(() => {
    //     addForm.fileList=[];
    // }, 1000);
};

const handleAddConfirm = async () => {
    dialogVisible.value = false;
    let classobj = await axios.post('/adminapi/classes', {
        title: addForm.title,
        number: addForm.list.length, // 人数
    })
    // console.log(classobj);
    await axios.post('/adminapi/students', {
        list: addForm.list,
        class: classobj.data._id,
    })
    await getList()
    addForm.title = ''
    addForm.list = []
    addForm.fileList = []
}

// 删除
const handleDelete = async (item) => {
    // console.log(item);
    await axios.delete(`/adminapi/classes/${item._id}`)
    await axios.delete(`/adminapi/students/${item._id}`)
    await getList()
}

// 排序
const sortFn= (a, b) => {
    return a.grade - b.grade
}
</script>